Swipe Actions#

In the Scripting app, you can attach swipe actions to views used as rows in a <List> (such as <HStack>) to support contextual interactions like deleting, editing, marking favorites, etc.

To improve clarity and ease of use in TypeScript, the SwiftUI swipeActions modifier is split into two separate modifiers:

• leadingSwipeActions: For swipe gestures from left to right.
• trailingSwipeActions: For swipe gestures from right to left.

leadingSwipeActions#

Adds swipe actions to the leading (left) edge of a list row.

Type#

1leadingSwipeActions?: {
2  allowsFullSwipe?: boolean
3  actions: VirtualNode[]
4}

Description#

• actions: An array of <Button> elements that will appear when the user swipes right on the row.
• allowsFullSwipe: If true (default), a full swipe will automatically invoke the first action in the list.

trailingSwipeActions#

Adds swipe actions to the trailing (right) edge of a list row.

Type#

1trailingSwipeActions?: {
2  allowsFullSwipe?: boolean
3  actions: VirtualNode[]
4}

Description#

• actions: An array of <Button> elements that appear when the user swipes left on the row.
• allowsFullSwipe: If true (default), a full swipe will automatically trigger the first action.

Example Usage#

1<List>
2  {list.map(item => 
3    <HStack
4      trailingSwipeActions={{
5        allowsFullSwipe: true,
6        actions: [
7          <Button
8            title="Delete"
9            role="destructive"
10            action={() => deleteItem(item)}
11          />,
12          <Button
13            title="Edit"
14            tint="accentColor"
15            action={() => editItem(item)}
16          />
17        ]
18      }}
19    >
20      <Image systemName={item.icon} />
21      <Text>{item.title}</Text>
22    </HStack>
23  )}
24</List>

You can also add leading actions:

1<HStack
2  leadingSwipeActions={{
3    actions: [
4      <Button
5        title="Favorite"
6        tint="orange"
7        action={() => markAsFavorite(item)}
8      />
9    ]
10  }}
11>
12  <Text>{item.title}</Text>
13</HStack>

Button Roles and Styling#

Each swipe action must be a <Button> component. You can customize buttons with:

• title: Text label for the button.
• action: The function to execute when tapped.
• role (optional): "destructive" for delete-like actions.
• tint (optional): Use system color names like "accentColor" or any custom color string.

Notes#

• You can use both leadingSwipeActions and trailingSwipeActions on the same row.
• Only views used within a scrollable list (like <List>) support swipe actions.
• If allowsFullSwipe is disabled, the user must tap the button rather than relying on a full swipe gesture.